<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>今日任务状态</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
	<link rel="stylesheet" type="text/css" href="../../css/vant.css" />

	<!-- <link rel="stylesheet" href="../../css/BarlowCondensed-Bold.woff.ttf" /> -->
	<!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	input{

		outline:none;
	}
	.aui-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    z-index: 8;
    visibility: hidden;
    -webkit-transition: opacity .3s,-webkit-transform .3s;
    transition: opacity .3s,transform .3s;
}
.aui-mask.aui-mask-in {
	visibility: visible;
  	opacity: 1;
}
.aui-mask.aui-mask-out {
	opacity: 0;
}

	</style>
</head>

<body style="background:#F7F4F2">
  <div id="app" v-cloak class="container" >
	  <!--<div class="transaction-notice" style="background-color: #2E353D;color: #fff">-->
		  <!--<div class="transaction-notice-time" style="background-color: #fff;color: #333333">-->
			  <!--29:59-->
		  <!--</div>-->
		  <!--<div class="transaction-notice-title" v-myclick="showmodal">-->
			  <!--有人响应了您的QHR买入广告，请及时处理。-->
		  <!--</div>-->
		  <!--<div class="transaction-notice-to">-->
			  <!--<img v-src="'../../image/btn_getback.png'">-->
		  <!--</div>-->
	  <!--</div>-->
	  <div class="task_header" style="background:#ffffff;padding: 12px 0">
		  <div class="task_header_container" style="margin-top: 0px">
			  <div class="task_header_content">
				  <div style="font-family: BarlowCondensed-Bold;margin-bottom: 10px;font-size: 18px">{{(task_list.surplusNum ? task_list.surplusNum : 0).toFixed(2)}}</div>
				  <div>剩余奖励</div>
			  </div>
			  <div class="task_header_content">
				  <div style="font-family: BarlowCondensed-Bold;margin-bottom: 10px;font-size: 18px">{{(task_list.alreadyNum ? task_list.alreadyNum :0).toFixed(2)}}</div>
				  <div>已领奖励</div>
			  </div>
			  <div class="task_header_content">
				  <div style="font-family: BarlowCondensed-Bold;margin-bottom: 10px;font-size: 18px">{{(task_list.upReward ? task_list.upReward :0).toFixed(2)}}</div>
				  <div>上次奖励</div>
			  </div>
		  </div>
	  </div>

		<div class="task_middle">
			<div class="adver">
				<div class="adver-div" v-myclick="to_taskgive">
					<img src="../../image/task-bg-1.png" style="width: 100%;"/>
					<div class="adver-div-info">有新任务可以免费领取了！</div>
				</div>
			</div>
			<div class="task_line" style="margin-top:0px;">
				<div class="line_icon"><img v-src="'../../image/heart-slices.png'" width="36px"></div>
				<div class="line_progress" style="width:50%;">
					<div class="dizan">点赞：{{task_list.acceptNumber}}/{{task_list.acceptNumberCount}}</div>
					<div style="margin-top:8px;overflow: hidden;border-top-right-radius: 2px;border-bottom-right-radius: 2px">
					<van-progress
					color="#F95656"
					:show-pivot=false
					:percentage="task_list.acceptNumber/task_list.acceptNumberCount*100"
					/>
				</div>

				</div>
				<div class="line_action line_action_active" v-myclick="to_fabulous">
					{{task_list.acceptNumber >= task_list.acceptNumberCount ? '已完成' : '去点赞'}}
				</div>
			</div>
			<div class="task_line">
				<div class="line_icon"><img v-src="'../../image/camera-slices.png'" width="36px"></div>
				<div class="line_progress" style="width:50%;">
					<div class="dizan">查看商品：{{task_list.lookCommodityNum}}/{{task_list.lookCommodityNumCount}}</div>
					<div style="margin-top:8px;overflow: hidden;border-top-right-radius: 2px;border-bottom-right-radius: 2px">
					<van-progress
					color="#F95656"
					:show-pivot=false
					:percentage="task_list.lookCommodityNum/task_list.lookCommodityNumCount*100"
					/>
				</div>
				</div>
				<div class="line_action line_action_active" v-myclick="to_shop">
					{{task_list.lookCommodityNum >= task_list.lookCommodityNumCount ? '已完成' : '去观看'}}
				</div>
			</div>
			<!--<div class="task_line">-->
				<!--<div class="line_icon"><img v-src="'../../image/shop-slices.png'" width="36px"></div>-->
				<!--<div class="line_progress" style="width:50%;">-->
					<!--<div class="dizan">观看一条广告：3/5</div>-->
					<!--<div style="margin-top:8px">-->
					<!--<van-progress-->
					<!--color="#F95656"-->
					<!--:show-pivot=false-->
					<!--:percentage="50"-->
					<!--/>-->
				<!--</div>-->

				<!--</div>-->
				<!--<div class="line_action">-->
					<!--去观看-->
				<!--</div>-->
			<!--</div>-->
			<div style="clear:both"></div>

			<div class="task_status" :class="{'task_style' : task_list.isComplete != 2 }"  v-myclick="[task_list.isComplete,complete]">
				{{itemtype[task_list.isComplete]}}
			</div>

		</div>
		<div class="task_bottom">
			<div class="bottom_item" style="border-right:2px solid #F7F4F2" v-myclick="to_mytask">
				<img v-src="'../../image/task-slices.png'" style="width: 12px;">
				<span>任务管理</span>
			</div>
			<div class="bottom_item" v-open-win vurl="task-help">
				<img v-src="'../../image/wenhao.png'" style="width: 15px;">
				<span>玩法帮助</span>
			</div>

			<div></div>

		</div>
		<div class="aui-mask aui-mask-in" v-show="modal" style="z-index:2"></div>
		<div class="alert_modal" v-if="modal">
			<div class="modal-container">
				<img class="modalclose" v-src="'../../image/close_slices.png'" v-myclick="[1, showmodal]">
				<img src="../../image/jiangli_slices.png" width="100%">
				<img class="modal-container-ok" v-myclick="close_lingqu" src="../../image/jiangli_slice_1.png" width="100%">
				<div class="alert_modal_info">{{complete_info.masonry.toFixed(2)}}个钻石</div>
			</div>
		</div>
	</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vant.min.js"></script>

<script>
	var vm,
		wx,
		task_list,
		complete_info,
	apiready = function () {
		setBSImg();
		new Vue({
			el: '#blank'
		})
		wx = api.require('wx');
		// setBSImg();
		var data = {
			wxOpenId:getPrefs('openid'),
			token:getPrefs('token'),
		};
		var callback=function(ret){
			task_list = ret.content;
			console.log(JSON.stringify(task_list));
			initApp();
		}
		pinet.post(APIURLP+'/play/user/myTodayTask',data, callback);
		api.parseTapmode();
		addListeners();
	};

	function initApp() {
		// var isBigImg = Vue.BSImg == 'big';
		vm = new Vue({
			el: '#app',
			data: {
				modal:false,
				complete_info:complete_info,
				task_list:task_list,
				status:false,
				itemtype:{
					'1':'进行中',
					'2':'领取',
					'3':'已领取',
				},
			},
			computed: {

			},
			methods: {
				to_fabulous:function(){
					if(this.task_list.acceptNumber < this.task_list.acceptNumberCount){
						api.openWin({
							name: 'index',
							url: '../../index.html',
							reload:true,
							pageParam:{to:0}
						});
					}else{
						return;
					}
				},
				to_shop:function(){
					if(this.task_list.lookCommodityNum < this.task_list.lookCommodityNumCount){
						api.openWin({
							name: 'index',
							url: '../../index.html',
							reload:true,
							pageParam:{to:1}
						});
					}else{
						return;
					}
				},
				complete:function(value){
					if(value == 2){
						var data = {
							wxOpenId:getPrefs('openid'),
							token:getPrefs('token'),
						};
						var callback  = function(ret) {
							vm.complete_info = ret.content;
							console.log(JSON.stringify(vm.complete_info));
							vm.reload_list();
						}
						pinet.post(APIURLP+'/play/user/exeTodayTask',data, callback);
						this.modal = !this.modal;
					}
				},
				showmodal:function(){
					this.modal = !this.modal
				},
				close_lingqu:function () {
					this.modal = !this.modal
				},
				to_mytask:function () {
					if(!hasPrefs('token')){
						api.toast({
							msg: '请先登录',
							duration: 2000,
							location: 'middle'
						});
						return;
					}
					api.openWin({
						name: 'mytask',
						url: './mytask.html'
					});
				},
				to_taskgive:function () {
					if(!hasPrefs('token')){
						api.toast({
							msg: '请先登录',
							duration: 2000,
							location: 'middle'
						});
						return;
					}
					api.openWin({
						name: 'taskgive',
						url: './taskgive.html'
					});
				},
				reload_list:function(){
					var data = {
						wxOpenId:getPrefs('openid'),
						token:getPrefs('token'),
					};
					var callback=function(ret){
						vm.task_list = ret.content;
					}
					pinet.post(APIURLP+'/play/user/myTodayTask',data, callback);
				}
			},

		})
	}

	function addListeners(){
		api.addEventListener({
			name: 'switch_to_frame_3'
		}, function (ret, err) {
			vm.reload_list();
		});
	}
</script>

</html>
